<template>
  <div style="margin: 20px">
    <RouterLink to="/manager/home">通过router实现页面跳转</RouterLink>||||||
    <a href="/manager/home">通过超链接实现页面跳转</a>
  </div>

  <div>
    <div style="font-size: 20px; font-weight: bold; color: red; text-decoration: underline; font-style: italic;
    margin-bottom: 20px; ">
      <h1>欢迎光临</h1>
    </div>

    <div style="margin-bottom: 30px">
      <!-- 渲染数据  -->
      {{a}} {{b}}{{c}}
    </div>

    <div style="margin-bottom: 20px">
      <!-- 渲染数据  -->
      {{data.a}}
      {{data.b}}
    </div>

    <div style="margin-bottom: 20px">
      <!--  v-model 表单绑定数据---修改表单里面的数据，{{c}} 里面的数据跟着变  -->
      <input v-model="c" />
    </div>

    <div style="margin-bottom: 20px">
      <!--    v-if表示只有里面的条件满足时，才会被渲染出来    v-else 都不满足就是这个-->
      <span style="color: red" v-if = "data.name === '佩奇' ">小猪佩奇</span>
      <span style="color: aqua" v-else-if="data.name === '乔治' ">小猪乔治</span>
      <span style="color: blueviolet" v-else >小猪零零</span>
    </div>

    <div style="display: flex; margin-bottom: 20px" >
      <!--   line-height 行与行之间距离        style="display: flex"可以让三个div排成一行
              v-for="item in data.arr ----- v-for循环打印  item 起的名字（随便取） data.arr打印的内容"  -->
      <div style="width:300px; height: 300px; text-align: center; line-height: 300px; font-size:30px;
      margin-right: 10px;  background-color: blueviolet;" @click="show(item)" v-for="item in data.arr" :key="item">{{ item }}</div>

      <div>
        <select style="width: 200px">
          <option  v-for="oppo in data.fruits" :key="oppo">{{oppo}}</option>
        </select>
      </div>
    </div>

    <div style="margin-bottom: 20px">
      <el-button type="primary" round @click="all" style="width: 100px; height: 50px; ">接好运</el-button>
    </div>

    <div>
      <!--    动态绑定属性    -->
      <div :style="data.box" style="width: 100px; height: 60px"> </div>

      <div><img :src="data.img" alt="示例图片" ></div>
    </div>

    <div style="margin: 30px">

      <el-icon :size="20">
        <Edit/>
      </el-icon>

      <span style="margin-left: 30px">
        <el-icon :size="20"><View/></el-icon>100
      </span>

      <el-button style="margin-left: 30px" type="danger" :icon="Delete" circle />

      <el-input
          v-model="data.a"
          style="width: 240px; margin-left: 30px"
          placeholder="Type something"
          :prefix-icon="Search"
      />

    </div>

  </div>
</template>

<script setup>
//导包
import {reactive, ref, onMounted} from "vue";
import {Delete, Edit, Search, View} from "@element-plus/icons-vue";
import { useRouter, useRoute } from "vue-router";

// 获取路由实例
const router = useRouter();
const route = useRoute();

// 定义数据 方法一：
const a = ref(1)
const b = ref("哎哟你干嘛")
const c = ref()

// 定义数据 方法二：
const data = reactive({
  // id:router.currentRoute.value.query.id,
  id: route.query.id,
  name:router.currentRoute.value.query.name,
  a:123,
  b:"觉得我回北京了",
  // name:"佩奇",
  arr:[1,2,3],
  fruits:['苹果','香蕉','橘子'],
  box:{
    width:'50px', // 修正拼写错误
    height:'100px',
    backgroundColor:'red',
  },
  img:'https://pic.3gbizhi.com/uploadmark/20240520/90389564726475faf2d518e8f81b6b7d.webp',
})

// 在组件挂载后打印ID
onMounted(() => {
  console.log('获取到传递过来的id='+data.id)
  console.log('获取到传递过来的name1='+data.name)
})

const all = () => {
  alert("好运+1")
}

const show = (value) => {
  alert(value)
}
</script>